<template>
	<view>
		<view class="cu-item bg-white margin-lr-sm radius margin-top-sm space-between padding-sm" v-if="value && value.product" @tap="goGoodsDetail">
			<image :src="value.product.picture" mode="aspectFill" class="product-picture" v-if="value.product"></image>
			<view class="w100 padding-left-sm">
				<view class="product-name text-lg text-overflow-2 text-black">{{value.product.name}}</view>

				<view class="price ">
					<text class="text-price text-red text-lg">{{value.product.price|mathTruePrice(value.discount)}}</text>
					<text class="text-price text-gray text-decoration margin-left">{{value.product.price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			value: {
				type: Object,
				default: null
			},
		},
		filters: {
			mathTruePrice(value, discount) {
				return (parseFloat(value) * parseFloat(discount) / 100).toFixed(2)
			},
		},
		created: function(e) {},
		data() {
			return {}
		},
		methods: {
			goGoodsDetail() {
				console.log(this.value)
				uni.navigateTo({
					url: "/pages/shop/goods?id=" + this.value.product_id
				})
			},
		},
	}
</script>

<style>
	.product-picture {
		width: 140rpx;
		height: 140rpx;
		min-width: 140rpx;
	}

	.product-name {
		height: 100rpx;
		line-height: 50rpx;
	}
</style>
